@extends('layouts.app', ['active' => 1])
@section('title')控制面板 -
@endsection

@section('style')

@endsection

@section('content')
            <div class="row">
                <div class=" col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">管理员</div>
                        <div class="panel-body">
                            <p>共 {{ $user_count }} 人</p>
                        </div>
                    </div>
                </div>
                <div class=" col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">人员</div>
                        <div class="panel-body">
                            <p>共 {{ $person_count }}人 </p>
                        </div>
                    </div>
                </div>
                <div class=" col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">今日新增人员</div>
                        <div class="panel-body">
                            <p>共 {{ $person_today_count }} 人</p>
                        </div>
                    </div>
                </div>
            </div>


        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">每年新增人员test</div>
                    <div id="person_year" class="panel-body" style="height:300px;"></div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default ">
                    <div class="panel-heading">人员户籍分布</div>
                    <div id="person_reg_addr" class="panel-body" style="height:300px;"></div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default" style="height:281px">
                    <div class="panel-heading">人员所在地分布</div>
                    <div id="person_temp_addr_map" class="panel-body" style="height:205px;"></div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">系统信息</div>
                    <div class="panel-body">
                        <table class="table table-bordered table-hover">

                            <tbody>
                            <tr>
                                <th style="width:200px">域名/IP地址	</th>
                                <td style="width:200px" colspan="3"><?php if('/'==DIRECTORY_SEPARATOR){echo $_SERVER['SERVER_ADDR'];}else{echo @gethostbyname($_SERVER['SERVER_NAME']);} ?> / <?php echo @$_SERVER['REMOTE_ADDR'];?></td>

                            </tr>

                            <tr>
                                <th style="width:200px">操作系统	</th>
                                <td ><?php $os = explode(" ", php_uname()); echo $os[0];?> &nbsp;内核版本：<?php if('/'==DIRECTORY_SEPARATOR){echo $os[2];}else{echo $os[1];} ?></td>
                                <th style="width:200px">解译引擎	</th>
                                <td ><?php echo $_SERVER['SERVER_SOFTWARE'];?></td>
                            </tr>
                            <tr>
                                <th style="width:200px">语言		</th>
                                <td ><?php echo getenv("HTTP_ACCEPT_LANGUAGE");?></td>
                                <th style="width:200px">端口	</th>
                                <td ><?php echo $_SERVER['SERVER_PORT'];?></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>





@endsection


@section('script')
    <script src="{{ asset('js/echarts.js') }}"></script>
    <script src="{{ asset('js/charts.js') }}"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('person_year'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                formatter: "{c} 人"
            },
            legend: {
                data:['人数']
            },
            xAxis: {
                data: [
                    @foreach ($year_archives as $k => $v)

                        "{{$v['year']}}年",

                    @endforeach
                ],
            },
            yAxis: {},
            series: [{
                name: '',
                type: 'bar',
                data: [
                    @foreach ($year_archives as $k => $v)

                    "{{ $v['count'] }}",

                    @endforeach
                ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script>
        var person_reg_pie = echarts.init(document.getElementById('person_reg_addr'));

       // app.title = '环形图';

        option = {
            title : {
                text: '',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} 人 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:[
                    @foreach ($reg_addrs as $k => $v)
                        '{{$k}}',
                    @endforeach
                ]
            },
            series : [
                {
                    name: '省份',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                            @foreach ($reg_addrs as $k => $v)
                        {value:{{$v}}, name:'{{$k}}'},
                        @endforeach
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        person_reg_pie.setOption(option);

    </script>
    <script>
        function randomData() {
            return Math.round(Math.random() * 1000);
        }
        var person_temp_addr_map = echarts.init(document.getElementById('person_temp_addr_map'));


        option = {

            tooltip: {
                trigger: 'item'
            },

            visualMap: {
                min: 0,
                max: 6000,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {
                        readOnly: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '',
                    type: 'map',
                    mapType: 'china',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [
                            @foreach ($temp_addrs_map as $k => $v)
                        {
                            name: '{{$k}}',
                            value: '{{$v}}'
                        },
                            @endforeach

                    ]
                }
            ]
        };
        person_temp_addr_map.setOption(option);

    </script>


@endsection